<template>
  <u-swipe-action>
    <u-swipe-action-item
      :options="[
        {
          text: '删除',
          style: {
            backgroundColor: '#ee0a24',
          },
        },
      ]"
    >
      <view class="item-box">
        <u--image class="item-image" :src="data.logo" width="40px" height="40px" shape="circle"></u--image>
        <view class="item-cont">
          <view class="item-l">
            <view class="item-title">
              <h3>{{ data.projectName || data.name }}</h3>
              <text class="state" v-if="data.projectStatusName || data.stageName || data.afterInvestStatusName">{{
                type == 0 ? data.projectStatusName : type == 1 ? data.stageName : data.afterInvestStatusName
              }}</text>
            </view>
            <view class="describe" v-if="type == 2 && inOneWordSwitch">
              {{ data.yewu || '暂无一句话描述' }}
            </view>
            <view class="describe" v-else-if="type != 2">
              {{ data.yewu || '暂无一句话描述' }}
            </view>
            <view class="info">
              {{ data.curInvestRoundName || data.roundName }}{{ data.curInvestRoundName || data.roundName ? '/' : ''
              }}{{ data.hangye }}{{ data.hangye ? '/' : '' }}{{ data.industryTypeName
              }}{{ data.industryTypeName ? '/' : '' }}{{ data.cityName }}
            </view>
          </view>
          <view class="follow" :class="{ active: data.isConcern }" @click.stop="changeTrains(data)">
            <u-icon name="plus" color="#04ae9a" size="12" v-if="!data.isConcern" />
            <text>{{ data.isConcern ? '已关注' : '关注' }}</text>
          </view>
        </view>
      </view>
      <view class="item-info">
        <view class="item-info-box">
          <u--image
            class="user-image"
            :src="data.createBy ? data.createBy.photo : data.createByPhoto"
            width="20px"
            height="20px"
            shape="circle"
          ></u--image>
          <text class="time">入库日期：{{ data.createDate }}</text>
        </view>
        <text class="info-team" @click="goTeam(data.id)" v-if="isTeam">团队成员</text>
      </view>
      <view class="item-highlights" v-if="type == 0 && !highlightSwitch && investmentHighlightSwitch">
        投资亮点：<text>{{ data.investmentHighlight || '暂无投资亮点信息' }}</text>
      </view>
      <view class="item-highlights" v-else-if="type == 0 && !highlightSwitch && preliminarilySwitch">
        初步判断：<text>{{ data.preliminarily || '暂无初步判断信息' }}</text>
      </view>
      <view class="item-highlights" v-else-if="type == 0">
        <text>
          highlight：<text>{{ data.highlight || '暂无highlight' }}</text></text
        >
      </view>
      <view class="item-highlights" v-if="type == 1 && path !== '/detail'">
        最新事件：
        <text v-if="data.teamworkInfo">
          {{ data.teamworkInfo.createUser.name }}在{{ data.teamworkInfo.createDate }}发表:<em
            v-html="data.teamworkInfo.teamworkMessage"
          ></em>
        </text>
        <text v-if="!data.teamworkInfo"> 暂无事件信息! </text>
      </view>
    </u-swipe-action-item>
  </u-swipe-action>
</template>

<script>
import { setConcern } from '@/http/project'
import { reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
  name: 'project',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
    type: {
      type: Number,
      default: () => 0,
    },
    switchMap: {
      type: Object,
      default: () => {
        return {}
      },
    },
    isTeam: {
      type: Boolean,
      default: () => false,
    },
  },
  setup(props) {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      highlightSwitch: props.switchMap['project:pool:highlight'] === '1',
      preliminarilySwitch: props.switchMap['project:detail:preliminarily'] === '1',
      investmentHighlightSwitch: props.switchMap['project:detail:investmentHighlight'] === '1',
      inOneWordSwitch: props.switchMap['project:searchadd:inOneWord'] === '1',
      industryAddSwitch: props.switchMap['projectPool:new:industry'] === '1',
      path: route.path,
    })
    const changeTrains = async (item) => {
      await setConcern({
        id: item.id,
        concern: item.isConcern ? 1 : 0,
      })
      item.isConcern = !item.isConcern
      window.DVM.notify({ type: 'success', message: '操作成功' })
    }
    const goTeam = (id) => {
      router.push({
        path: '/mobile/team',
        query: {
          id,
          memberType: props.type === 1 ? 'project' : 'projectPool',
        },
      })
    }
    return {
      ...toRefs(state),
      changeTrains,
      goTeam,
    }
  },
}
</script>

<style lang="scss" scoped>
.u-swipe-action {
  padding: 30rpx 0;
  border-bottom: 1rpx solid $qtborderColor;
}
.item-box {
  display: flex;
  .item-image {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
    border: 1rpx solid $qtborderColor;
  }
  .item-cont {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 100rpx);
    .item-title {
      display: flex;
      h3 {
        max-width: calc(100% - 140rpx);
        font-size: 30rpx;
        margin-right: 20rpx;
        font-weight: bold;
      }
      .state {
        padding: 0 10rpx;
        height: 34rpx;
        line-height: 34rpx;
        font-size: 24rpx;
        background: #d0edf5;
        color: #4faecb;
        border-radius: 6rpx;
      }
    }
    .item-l {
      width: calc(100% - 100rpx);
    }
    .describe {
      margin: 10rpx 0;
      font-size: 24rpx;
      color: #bbc9d9;
    }
    .info {
      font-size: 24rpx;
    }
    .follow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100rpx;
      height: 50rpx;
      border: 1px solid #04ae9a;
      color: #04ae9a;
      line-height: 50rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
      &.active {
        border-color: #bbc9d9;
        color: #bbc9d9;
      }
    }
  }
}
.item-info {
  display: flex;
  margin: 20rpx 0;
  color: #bbc9d9;
  font-size: 24rpx;
  justify-content: space-between;
  align-items: center;
  &-box {
    display: flex;
  }
  .user-image {
    width: 40rpx;
    height: 40rpx;
    vertical-align: middle;
    margin-right: 10rpx;
  }
  .info-team {
    font-size: 24rpx;
    font-weight: bold;
    color: #04ae9a;
  }
}
.item-highlights {
  padding: 10rpx;
  margin-right: 30rpx;
  background: rgba(189, 203, 218, 0.3);
  font-size: 24rpx;
  border-radius: 8rpx;
  text {
    color: #bbc9d9;
  }
}
</style>
